<script setup lang="ts">
import { computed, ref } from 'vue'
import { notification, secretKey } from '@/services/common'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/stores/userInfo'
import { useTokenStore } from '@/stores/token'
import { useTabStore } from '@/stores/tab'
import { storeToRefs } from 'pinia'
import { http, CODE } from '@/plugins/axios'
import { HmacSHA256 } from 'crypto-js'

const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()
const tabsStore = useTabStore()

const router = useRouter()

const username = storeToRefs(userInfoStore).username
const password = ref('');

const loading = ref(false)

const submitDisabled = computed(() => {
  return !username.value || !password.value
})

function submit() {
  loading.value = true
  if (!username.value) {
    notification({
      type: 'info',
      message: '请输入账号'
    })
    return;
  }
  if (!password.value) {
    notification({
      type: 'info',
      message: '请输入密码'
    })
    return;
  }
  http({
    url: '/api/user/login',
    method: 'post',
    data: {
      username: username.value,
      password: HmacSHA256(password.value, secretKey)
    }
  }).then((res: any) => {
    loading.value = false
    if (res.code === CODE.SUCCESS) {
      notification({
        type: 'success',
        message: res.msg
      })
      tabsStore.clean()
      userInfoStore.$patch({ username: username.value })
      tokenStore.$patch({ token: res.data.token })
      router.push('/dashboard/home')
    }
  }).finally(() => {
    loading.value = false
  })
}

</script>

<template>
  <section class="section-page">
    <c-i18n-btn class="i18n-btn"></c-i18n-btn>
    <section class="section-content">
      <section class="section-title"><c-i18n>管理后台</c-i18n></section>

      <div class="main-box">
        <div class="title"><c-i18n>用户名</c-i18n>：</div>
        <el-input v-model.trim="username" :placeholder="$t('用户名')" />
        <div class="title"><c-i18n>密码</c-i18n>：</div>
        <el-input type="password" show-password v-model.trim="password" :placeholder="$t('密码')" />

        <div class="tip fotget">
          <span><c-i18n>忘记密码</c-i18n></span>
        </div>

        <el-button class="submit" type="primary" :disabled="submitDisabled" :loading="loading" @click="submit"><c-i18n>登录</c-i18n></el-button>

        <div class="tip register">
          <span>
            <c-i18n>没有账号?去</c-i18n>
            <RouterLink to="/register"><c-i18n>注册</c-i18n></RouterLink><c-i18n>一个</c-i18n>
          </span>
        </div>
      </div>
    </section>
  </section>
</template>

<style lang="scss" scoped>
.section-page {
  position: relative;
  height: 100%;
  background: url('@/assets/images/bg.png');

  .i18n-btn {
    position: absolute;
    right: 48px;
    top: 24px;
  }

  .section-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .main-box {
      margin-top: 30px;
      padding: 24px 32px;
      width: 320px;
      height: 320px;
      background: #ffffff;
      border-radius: 8px;
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(0, 0, 0, 0.04);

      .title {
        margin: 8px 0;
      }

      .submit {
        margin-top: 20px;
        width: 100%;
      }

      .tip {
        margin-top: 24px;
        font-size: 12px;

        &.register {
          text-align: center;
        }

        &.fotget {
          margin-top: 12px;
          text-align: right;
        }
      }
    }

    .section-title {
      font-size: 32px;
      font-weight: 600;
    }
  }
}
</style>
